<template>
  <a-card class="app-line-card" title="Default size card">
    <div ref="chartRef" class="app-line-chart" style="width:89%;height:350px;" />
  </a-card>

</template>

<script lang="ts">
import { defineComponent, } from 'vue'
// import debounce from 'lodash.debounce'
import echarts from 'echarts'

export default defineComponent({
  props: {
    expectedData: {
      type: Object,
      default: () => {},
    },
    actualData: {
      type: Object,
      default: () => {},
    }
  },
  setup() {
    // const chartRef = ref(null)
    let chart

    return {
      width: '100%',
      height: '350px',
      chart,
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartRef).setOption({
        backgroundColor: '#fff',
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: ['expected', 'actual'],
        },
        series: [
          {
            name: 'expected',
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2,
                },
              },
            },
            smooth: true,
            type: 'line',
            data: this.expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: this.actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
        ],
      })
    },
  },
})
</script>

<style lang="scss">
.app-line-card{
  margin-top: 20px;
}
</style>
